<section [formGroup]="sendEmailConfigForm" fxLayout="column">
  <mat-checkbox formControlName="useSystemSmtpSettings" style="padding-bottom: 16px;">
    {{ 'tb.rulenode.use-system-smtp-settings' | translate }}
  </mat-checkbox>
  <section fxLayout="column" *ngIf="sendEmailConfigForm.get('useSystemSmtpSettings').value === false">
    <mat-form-field class="mat-block">
      <mat-label translate>tb.rulenode.smtp-protocol</mat-label>
      <mat-select formControlName="smtpProtocol">
        <mat-option *ngFor="let smtpProtocol of smtpProtocols" [value]="smtpProtocol">
          {{ smtpProtocol.toUpperCase() }}
        </mat-option>
      </mat-select>
    </mat-form-field>
    <div fxLayout.gt-sm="row" fxLayoutGap.gt-sm="8px">
      <mat-form-field fxFlex="100" fxFlex.gt-sm="60" class="mat-block">
        <mat-label translate>tb.rulenode.smtp-host</mat-label>
        <input required matInput formControlName="smtpHost">
        <mat-error *ngIf="sendEmailConfigForm.get('smtpHost').hasError('required')">
          {{ 'tb.rulenode.smtp-host-required' | translate }}
        </mat-error>
      </mat-form-field>
      <mat-form-field fxFlex="100" fxFlex.gt-sm="40" class="mat-block">
        <mat-label translate>tb.rulenode.smtp-port</mat-label>
        <input required type="number" step="1" min="1" max="65535" matInput formControlName="smtpPort">
        <mat-error *ngIf="sendEmailConfigForm.get('smtpPort').hasError('required')">
          {{ 'tb.rulenode.smtp-port-required' | translate }}
        </mat-error>
        <mat-error *ngIf="sendEmailConfigForm.get('smtpPort').hasError('min')">
          {{ 'tb.rulenode.smtp-port-range' | translate }}
        </mat-error>
        <mat-error *ngIf="sendEmailConfigForm.get('smtpPort').hasError('max')">
          {{ 'tb.rulenode.smtp-port-range' | translate }}
        </mat-error>
      </mat-form-field>
    </div>
    <mat-form-field class="mat-block">
      <mat-label translate>tb.rulenode.timeout-msec</mat-label>
      <input required type="number" step="1" min="0" matInput formControlName="timeout">
      <mat-error *ngIf="sendEmailConfigForm.get('timeout').hasError('required')">
        {{ 'tb.rulenode.timeout-required' | translate }}
      </mat-error>
      <mat-error *ngIf="sendEmailConfigForm.get('timeout').hasError('min')">
        {{ 'tb.rulenode.min-timeout-msec-message' | translate }}
      </mat-error>
    </mat-form-field>
    <mat-checkbox formControlName="enableTls" style="padding-bottom: 16px;">
      {{ 'tb.rulenode.enable-tls' | translate }}
    </mat-checkbox>
    <mat-form-field class="mat-block" *ngIf="sendEmailConfigForm.get('enableTls').value === true">
      <mat-label translate>tb.rulenode.tls-version</mat-label>
      <mat-select formControlName="tlsVersion">
        <mat-option *ngFor="let tlsVersion of tlsVersions" [value]="tlsVersion">
          {{ tlsVersion }}
        </mat-option>
      </mat-select>
    </mat-form-field>
    <tb-checkbox formControlName="enableProxy" style="display: block; padding-bottom: 16px;">
      {{ 'tb.rulenode.enable-proxy' | translate }}
    </tb-checkbox>
    <div *ngIf="sendEmailConfigForm.get('enableProxy').value">
      <div fxLayout.gt-sm="row" fxLayoutGap.gt-sm="8px">
        <mat-form-field class="mat-block" fxFlex="100" fxFlex.gt-sm="60">
          <mat-label translate>tb.rulenode.proxy-host</mat-label>
          <input matInput required formControlName="proxyHost">
          <mat-error *ngIf="sendEmailConfigForm.get('proxyHost').hasError('required')">
            {{ 'tb.rulenode.proxy-host-required' | translate }}
          </mat-error>
        </mat-form-field>
        <mat-form-field class="mat-block" fxFlex="100" fxFlex.gt-sm="40">
          <mat-label translate>tb.rulenode.proxy-port</mat-label>
          <input matInput required formControlName="proxyPort" type="number" step="1" min="1" max="65535">
          <mat-error *ngIf="sendEmailConfigForm.get('proxyPort').hasError('required')">
            {{ 'tb.rulenode.proxy-port-required' | translate }}
          </mat-error>
          <mat-error *ngIf="sendEmailConfigForm.get('proxyPort').hasError('min') || sendEmailConfigForm.get('proxyPort').hasError('max')">
            {{ 'tb.rulenode.proxy-port-range' | translate }}
          </mat-error>
        </mat-form-field>
      </div>
      <mat-form-field class="mat-block">
        <mat-label translate>tb.rulenode.proxy-user</mat-label>
        <input matInput formControlName="proxyUser">
      </mat-form-field>
      <mat-form-field class="mat-block">
        <mat-label translate>tb.rulenode.proxy-password</mat-label>
        <input matInput formControlName="proxyPassword">
      </mat-form-field>
    </div>
    <mat-form-field class="mat-block" floatLabel="always">
      <mat-label translate>tb.rulenode.username</mat-label>
      <input matInput placeholder="{{ 'tb.rulenode.enter-username' | translate }}" formControlName="username">
    </mat-form-field>
    <mat-form-field class="mat-block" floatLabel="always">
      <mat-label translate>tb.rulenode.password</mat-label>
      <input matInput type="password" placeholder="{{ 'tb.rulenode.enter-password' | translate }}" formControlName="password">
    </mat-form-field>
  </section>
</section>
